<template>
  <div>
    <div id="tax"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
const props = defineProps({
  id: {
    type: String,
    default: "",
  },
  data: {
    type: Array,
    default: () => {
      return [
      ];
    },
  },
});

onMounted(() => {
  var app = {};

  var chartDom = document.getElementById("tax");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      right: "5%",

      textStyle: {
        color: "rgba(255, 255, 255)",
      },
    },
    grid: {
      top: "5%",
      left: "1%",
      right: "8%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      name: "万",
      type: "value",
      boundaryGap: [0, 0.01],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, 0.6)", // 坐标轴线线的颜色
          // 坐标轴线线宽
          type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
      },
    },
    yAxis: {
      type: "category",
      data: ['No5', "No4", "No3", "No2", "No1"],
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(102, 251, 255, 1)", // 坐标轴线线的颜色
          // 坐标轴线线宽
          type: "solid", // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
        },
      },
    },
    series: [
      {
        barWidth: "70%",
        type: "bar",
        data: props.data.map(item=>item.value),
        label: {
          show: true,
          position: "top",
          color:'rgba(255, 255, 255, 1)'
        },
        itemStyle: {
              normal: {
                label: {
                  formatter:(name)=>{
                    const obj= props.data.find(item=>item.value===name.data)
                   
                    return   obj.name
                  },
                  show: true,
                  position: [5,-13],
                  textStyle: {
                    fontSize: "12",
                    color: "#fff"
                  }
                },
               
                opacity: 1
              }
            },

        color: {
          type: "linear",
          x: 1,
          y: 1,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(50, 166, 255, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(65, 94, 116, 0.1412)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
#tax {
  width: 100%;
  height: 280px;
}
#tax div{
    width: 100%;
    height: 280px;


}
</style>
